<template>
    <div class="admin">
        <div class="aside">
            <Aside/>
        </div>
        <div class="adminBox" v-if="showAdminBox">
            
            <el-form :model="userInfo" class="form" size="large">
                <div style="width: 100%;text-align: center;font-size: 1.5em;
                padding-bottom:20px;">修改个人信息</div>

                <el-form-item required label="头像" label-width="70px">
                    <el-upload
                        v-model:fileList="fileList"
                        list-type="picture-card"
                        :drag="true"
                        action="http://127.0.0.1:9000/upload"
                        :on-success="uploadSuccess"
                        :on-remove="handleRemove"
                        :on-change="onUpload" 
                        ref="ref_upload" >
                        <el-icon style="margin-top: 10px;color:darkturquoise;" size="40"><UploadFilled /></el-icon>
                    </el-upload>
                </el-form-item>

                <el-form-item required label="昵称" label-width="70px">
                    <el-input v-model="userInfo.username" type="text" autocomplete="off" placeholder="请输入.." />
                </el-form-item>

                <el-form-item required label="密码" label-width="70px">
                    <el-input v-model="userInfo.password" type="text" autocomplete="off" placeholder="请输入.." />
                </el-form-item>

                <el-form-item required label="性别" label-width="70px">
                    <el-radio-group v-model="userInfo.sex" >
                        <el-radio value="男">男 <el-icon color="skyblue"><Male /></el-icon></el-radio>
                        <el-radio value="女">女 <el-icon color="pink"><Female /></el-icon></el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submit()">
                        提交
                    </el-button>
                </el-form-item>

                </el-form>

          
        </div>
        <div class="container" v-show="!showAdminBox">
            <Content/>
        </div>
    </div>
    <messageComp ref="ref_messageComp"></messageComp>
</template>

<script setup>
import messageComp from '../components/messageComp.vue';
import axios from 'axios'
import { ref,getCurrentInstance,watch   } from 'vue'
import { useStore } from "vuex";
import { useRouter,useRoute } from 'vue-router'
import Aside from '../components/aside.vue'
import Content from '../components/content.vue'

const route = useRoute()
const store = useStore()
const showAdminBox = ref(false)
const ref_messageComp = ref(null) //获取-弹窗信息-dom实例
const userInfo = ref(store.state.userInfo)
const fileList = ref([{
    url:userInfo.value.avatar
}])

if (route.name == 'admin') {
    showAdminBox.value = true
}
// 提交
const submit = ()=>{
    axios({
        method:'post',
        url:store.state.url + '/users/update',
        data:userInfo.value,
    }).then(res=>{
        if (res.data.code == 200) {
            ref_messageComp.value.messageSuccess('恭喜您，修改成功')
            localStorage.setItem('userInfo',JSON.stringify(res.data.data)) //重新配置管理员信息
            setTimeout(() => {
                location.reload()
            }, 500);
        }else{
            ref_messageComp.value.messageWarning('数据存在延迟，请重新登录!')
        }
    }).catch(err=>{
        ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
    })
}

const handleRemove = (e,val)=>{ //删除编辑面板-上传图片
    console.log('删除图片',e);
    console.log('还剩余图片',val); 
    // 记住这个数组  这个是人家自带的
}
// 上传成功
const uploadSuccess = (data)=>{
    userInfo.value.avatar = data.data.url
}
// 每上传一张图片
const onUpload = (e,val)=>{ //删除编辑面板-上传图片
    fileList.value = [] //清空数组否则累加图片了
    fileList.value.push(e)
    console.log('每上传一张图片',fileList.value);
}
watch(
    () => route.name,
    (newPath) => {
        if (newPath == 'admin') {
            showAdminBox.value = true
            return
        }
        // 在这里处理路由跳转的逻辑
        showAdminBox.value = false
        console.log('路由跳转到:', newPath);
    }
);

store.commit('userInfo')


</script>

<style scoped>
.admin{
    width: 100%;
    height: 100%;
}
.aside{
    position: absolute;
    width: 210px;
    height: 100%;
}
.container{
    position: absolute;
    left: 210px;
    width: calc(100% - 210px);
    height: 100%;
}
.adminBox{
    position: absolute;
    left: 210px;
    width: calc(100% - 210px);
    height: 100%;
    /* border: 1px solid ; */
}
.form{
   padding: 20px;
   margin-left: 2%;
   margin-top: 2%;
   height: 20%;
   width: 40%;
   height: 86%;
   box-shadow: 0 0 4px #ccc;
   border-radius: 5px;
   /* border: 1px solid ; */
}

.el-form-item{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    place-items: center;
}
.el-input{
    min-width: 200px;
    max-width: 400px;
    /* border: 1px solid ; */
}
.el-button{
    margin-top: 2%;
    width: 70% !important;
    margin-left: 10%;
}
</style>